---
id: stacks-provider
title: StacksProvider
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { defaultTabsProps, Props } from '../../core/components';

Use `StacksProvider` at the top of your `react` tree to overwrite default options.

### Basic usage

```tsx
import { StacksProvider } from '@mobily/stacks'

const App = () => {
  return (
    <StacksProvider spacing={4}>
      …
    </StacksProvider>
  )
}
```

### Props

<Props
  data={[
    {
      name: 'spacing',
      type: 'float',
      required: false,
      defaultValue: '4',
    },
    {
      name: 'debug',
      type: 'bool',
      required: false,
      defaultValue: 'false',
    },
    {
      name: 'breakpoints',
      type: 'breakpoints',
      rawTsType: 'Breakpoints',
      required: false,
      defaultValue: '[["mobile", 0], ["tablet", 768], ["desktop", 992]]',
    }
  ]}
/>
